<template>
    <q-toolbar class="min-h-[40px] flex-center q-gutter-x-sm">
        <q-btn push text-color="primary" label="新增" icon="add" @click="详情.初始化()" />
        <q-btn push text-color="negative" label="删除" icon="delete" @click="list.删()" :disabled="!list.a.选中组.length" />
        <q-input outlined dense v-model="list.req.多字段搜索关键词" placeholder="关键词……" debounce="800" clearable>
            <template v-slot:append>
                <q-icon name="search" />
            </template>
        </q-input>
        <q-btn-dropdown push label="筛选" icon="filter_alt">
            <q-list class="min-w-80 q-pa-sm">
                <q-toolbar class="min-h-[40px] flex-center q-gutter-x-sm">
                    <q-btn dense text-color="primary" label="新增" icon="add" @click="list.增筛选()" />
                    <q-btn dense text-color="primary" label="应用" icon="done" @click="list.提交筛选()" />
                    <q-btn dense text-color="negative" label="清除" icon="clear" @click="list.删筛选()" />
                </q-toolbar>
                <q-separator spaced />
                <q-item clickable v-for="(筛选) in list.a.筛选组">
                    <q-item-section>
                        <q-select outlined dense v-model="筛选.字段名" :options="list.筛选设置.字段名" label="字段名" />
                    </q-item-section>
                    <q-item-section>
                        <q-select outlined dense v-model="筛选.比较运算符" :options="list.筛选设置.比较运算符" label="比较符号" />
                    </q-item-section>
                    <q-item-section>
                        <q-input outlined dense v-model="筛选.字段值" placeholder="关键词……">
                        </q-input>
                    </q-item-section>
                </q-item>
            </q-list>
        </q-btn-dropdown>
    </q-toolbar>
</template>

<script setup>
const props = defineProps({
    // 可选属性: { type: Array, default: [] }
    详情: Object,
    设置: Object,
    list: Object,
    背景色: {
        type: String,
        default: ""
    },
})
</script>

<style lang="scss" scoped></style>